<template>
  <div>
    <div>
      <el-form ref="form" label-width="120px" :inline="false">
        <el-form-item label="当前视频时间" label-width="120px">
        <div>{{
          currentTime
        }}</div>
        </el-form-item>
        <el-form-item label="播放速度">
          <el-select
            v-model="speedValue"
            placeholder="播放速度设置"
            @change="speedSetting"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <video
        :src="videoSrc"
        controls="controls"
        style="width:100%;"
        v-on:timeupdate="timeupdate"
        id="video"
      ></video>
    </div>
    <div style="width:100%;text-align:center;font-size:18px;padding:20px;">
      {{ wordScreenItem["en"] }}
    </div>
    <div></div>
  </div>
</template>

<script>
import { getPlayInfo } from "@/api/aliyun/video";
import { getVideo, getWordScreen } from "@/api/video/index";
export default {
  props: ["videoId"],
  watch: {
    videoId: {
      handler: function(val, oldVal) {
        this.id = val;
        this.getPlayInfo();
      },
      immediate: true
    }
  },
  data() {
    return {
      id: "",
      videoSrc: "",
      wordScreen: {},
      videoInstance: {},
      now: 0,
      wordScreenItem: {},
      options: [
        {
          value: 0.1,
          label: "0.1x"
        },
        {
          value: 0.2,
          label: "0.2x"
        },
        {
          value: 0.3,
          label: "0.3x"
        },
        {
          value: 0.4,
          label: "0.4x"
        },
        {
          value: 0.5,
          label: "0.5x"
        },
        {
          value: 0.6,
          label: "0.6x"
        },
        {
          value: 0.7,
          label: "0.7x"
        },
        {
          value: 0.8,
          label: "0.8x"
        },
        {
          value: 0.9,
          label: "0.9x"
        },
        {
          value: 1,
          label: "1.0x"
        }
      ],
      speedValue: 1,
      currentTime: 0
    };
  },
  mounted() {},
  methods: {
    getPlayInfo() {
      getVideo(this.id).then(res => {
        getPlayInfo(res.data.out_video_id).then(r => {
          this.videoSrc = r.data.PlayInfoList.PlayInfo[0].PlayURL;
          this.videoInstance = document.getElementById("video");
        });
        this.getWordScreen();
      });
    },
    getWordScreen() {
      getWordScreen({ videoId: this.id }).then(res => {
        this.wordScreen = res.data;
      });
    },
    timeupdate() {
      this.currentTime = this.videoInstance.currentTime;
      let now = Math.floor(this.videoInstance.currentTime);
      if (
        this.wordScreen[now] &&
        this.videoInstance.currentTime >
          parseFloat(this.wordScreen[now]["start_millisecond"]) +
            this.wordScreen[now]["start_second"]
      ) {
        console.log("有没有来");
        this.now = now;
        this.wordScreenItem = this.wordScreen[now];
      }
    },
    speedSetting(speed) {
      this.speedValue = speed;
      this.videoInstance.playbackRate = speed;
    }
  }
};
</script>

<style scoped></style>
